<script setup lang="ts">
import { evaluteDoctor } from '@/services/consult'
import type { ConsultOrderItem, EvaluteDocConfig } from '@/types/consult'
import type { EvaluateDoc } from '@/types/room'
import { showLoadingToast, showToast } from 'vant'
import { computed, inject, ref, type Ref } from 'vue'
import { useRoute } from 'vue-router'

defineProps<{
  evalute?: EvaluateDoc
}>()
const disabled = computed(() => {
  return evaluteObj.value.content ? false : true
})
const route = useRoute()
const order = inject<Ref<ConsultOrderItem>>('order')

const evaluteObj = ref<EvaluteDocConfig>({
  docId: order?.value.docInfo?.id as string,
  orderId: route.query.orderId as string,
  score: 0,
  content: '',
  anonymousFlag: 0
})
// 点击提交评价
const changeView = inject<(score: number) => void>('changeView')
const submitEva = async () => {
  if (!evaluteObj.value.content) return showToast('请填写评价内容')
  evaluteObj.value.anonymousFlag = evaluteObj.value.anonymousFlag ? 1 : 0
  const t = showLoadingToast('评价中...')
  await evaluteDoctor(evaluteObj.value)
  // 评价之后需要通知父组件，改变数据从而修改视图
  changeView && changeView(evaluteObj.value.score)
  t.close()
}
</script>

<template>
  <div class="service-card" v-if="evalute">
    <h4>感谢您的评价</h4>
    <p>本次在线问诊服务您还满意吗？</p>
    <van-rate
      :model-value="evalute.score"
      :size="25"
      gutter="10"
      touchable
      color="#ffd21e"
      void-icon="star"
      void-color="#eee"
    />
  </div>
  <div class="service-card" v-else>
    <h4>医生服务评价</h4>
    <p>我们会更加努力提升服务质量</p>
    <van-rate
      v-model="evaluteObj.score"
      :size="25"
      gutter="10"
      touchable
      color="#ffd21e"
      void-icon="star"
      void-color="#eee"
    />
    <van-cell-group inset>
      <van-field
        rows="2"
        autosize
        type="textarea"
        maxlength="150"
        placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
        show-word-limit
        v-model.trim="evaluteObj.content"
      />
    </van-cell-group>
    <div class="submit">
      <van-checkbox v-model="evaluteObj.anonymousFlag">匿名评价</van-checkbox>
      <van-button
        :class="{ disabled }"
        size="small"
        round
        type="primary"
        @click="submitEva"
        >提交评价</van-button
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/room.scss';
</style>
